<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, index) in commentsInfo" :key="index">
                <div class="cmt-title">
                    第{{index}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore()">加载更多</mt-button>

    </div>

</template>

<script type="text/javascript">
    import { Toast } from 'mint-ui';

     export default{
         props:['id'],
         data() {
             return{
                 commentsInfo: [],
                 pageIndex: 0,
                 msg: ''
             }
         },
         created() {
             this.getNewsInfo()
         },
         methods: {
             getNewsInfo() {
                 this.$http.get('getNewsInfo/' + this.id + '/' + this.pageIndex + '.php').then( result => {
                    if(result.body.status === 0){
                        // this.commentsInfo = result.body.Message
                        this.commentsInfo = this.commentsInfo.concat(result.body.Message)
                        console.log(result)
                    } else{
                        Toast("评论获取失败")
                    }
                 })
             },
             getMore() {
                 this.pageIndex++
                 this.getNewsInfo()

             },
             postComment() {
                // var params = new URLSearchParams();
                // params.append('username', 'admin');
                // params.append('password', '123456');
                // axios.post('test.php', params).then(res => console.log(res.data));
                var date = new Date()
                var stu={
                    id: 10,
                    user_name: 'Madao',
                    add_time: date.getFullYear() + "-" + date.getMonth() + '-' + date.getDay() + '-' + date.getHours() + ':' + date.getSeconds() + ':' + date.getMinutes(),
                    content: this.msg.trim()
                }
                this.$http.post('1.php',  {"student" : stu})
                .then(res => {
                    if(res.body.status === 0){
                        this.commentsInfo.unshift(stu)
                        console.log(res)
                        
                    }
                })
         }
    }
}
</script>
<style lang="scss" scoped>
    .cmt-container {
        h3 {
            font-size: 18px;
        }
        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list {
            margin: 5px 0;

            .cmt-item {
                font-size: 13px;

                .cmt-title {
                    background-color: #ccc;
                    line-height: 30px;
                }
                .cmt-body{
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>